<!--商品系统
      分类维护-->
<template>
  <div>
    <el-button type="danger" @click="batchDelete">批量删除</el-button>
    <el-tree :data="menus" :props="defaultProps" :expand-on-click-node="false" show-checkbox node-key="catId" :default-expanded-keys="expandedKey" ref="menuTree">
    <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button v-if="node.level <= 2" type="text" size="mini" @click="() => append(data)"> Append </el-button>
          <el-button type="text" size="mini" @click="edit(data)"> Edit </el-button>
          <el-button v-if="node.childNodes === 0" type="text" size="mini" @click="() => remove(node, data)"> Delete </el-button>
        </span>
    </span>
    </el-tree>
    <!-- 添加对话框，新增菜单使用 -->
    <el-dialog :title="title" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false">
      <el-form :model="category">
        <el-form-item label="分类名称">
          <el-input v-model="category.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <el-form :model="category">
        <el-form-item label="图标">
          <el-input v-model="category.icon" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <el-form :model="category">
        <el-form-item label="计量单位">
          <el-input v-model="category.productUnit" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitData">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
    export default {
        data() {
          return {
              menus: [],            //所有的菜单集合
              defaultProps: {       //树形空间显示的对象及其属性
                  children: 'children',   //本身及其子类
                  label: 'name'           //显示的名称 根据后台数据字段名称
              },
              expandedKey: [],      //树形默认展开的 节点key
              dialogVisible: false, //默认对话框关闭
              category: {catId: null, name: "", parentCid: 0, catLevel: 0, showStatus: 1, sort: 0, icon: "", productUnit: ""},          //表单对象，是后台的菜单对象
              dialogType: "",       //edit, add
              title: "",

            };
        },
        methods: {
            getMenus(){
                this.$http({
                    url: this.$http.adornUrl('/product/category/list/tree'),
                    method: 'get'
                }).then(({data}) => {
                    console.log("成功获取到菜单数据", data.data);
                    this.menus = data.data;
                })
            },
            append(data) {
                console.log("append", data);
                this.dialogType = "add";
                this.title = "添加分类";
                this.dialogVisible = true;
                //新增时：赋值父节点和级别，其余的设置为初始值 防止edit的值回显
                this.category.catId = null;
                this.category.name = "";
                this.category.parentCid = data.catId;
                this.category.catLevel = data.catLevel * 1 +1;
                this.category.sort = 0;
                this.category.showStatus = 1;
                this.category.icon = "";
                this.category.productUnit = "";
            },

            edit(data){
                console.log("要修改的数据", data);
                this.dialogType = "edit";
                this.title = "修改分类";
                this.dialogVisible = true;
                //将数据进行回显, 发送请求获取当前节点最新的数据
                this.$http({
                    url: this.$http.adornUrl(`/product/category/info/${data.catId}`),
                    method: 'get'
                }).then(({data}) => {
                    //请求成功后，将数据进行回显
                    console.log("请求成功后，将进行回显的数据为：", data);
                    this.category.catId = data.data.catId;
                    this.category.name = data.data.name;
                    this.category.icon = data.data.icon;
                    this.category.productUnit = data.data.productUnit;
                    this.category.parentCid = data.data.parentCid;
                });
            },

            submitData(){
                if (this.dialogType === "add"){
                    this.addCategory();
                }
                if (this.dialogType === "edit"){
                    this.editCategory();
                }
            },

            //点击确定，添加三级分类
            addCategory(){
                console.log("提交的三级分类数据", this.category);
                this.$http({
                    url: this.$http.adornUrl("/product/category/save"),
                    method: 'post',
                    data: this.$http.adornData(this.category, false)
                }).then(({data}) => {
                    this.$message({
                        type: 'success',
                        message: '菜单新增成功!'
                    });
                    //关闭表单新增的对话框
                    this.dialogVisible = false;
                    //刷新出新的菜单
                    this.getMenus();
                    //设置需要展开的菜单
                    this.expandedKey = [this.category.parentCid]
                });
            },

            //修改三级分类数据
            editCategory(){
                //过滤掉 非修改的字段
                const {catId, name, icon, productUnit} = this.category;
                const param = {catId: catId, name: name, icon: icon, productUnit: productUnit};
                this.$http({
                    url: this.$http.adornUrl("/product/category/update"),
                    method: "post",
                    data: this.$http.adornData(param, false)
                }).then(({data}) => {
                    this.$message({
                        type: 'success',
                        message: '菜单修改成功!'
                    });
                    //关闭表单新增的对话框
                    this.dialogVisible = false;
                    //刷新出新的菜单
                    this.getMenus();
                    //设置需要展开的菜单
                    this.expandedKey = [this.category.parentCid];
                });
            },

            remove(node, data) {
                var ids = [data.catId];
                this.$confirm(`是否删除【${data.name}】菜单?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http({
                        url: this.$http.adornUrl('/product/category/delete'),
                        method: 'post',
                        data: this.$http.adornData(ids, false)
                    }).then(({data}) => {
                        this.$message({
                            type: 'success',
                            message: '菜单删除成功!'
                        });
                        //刷新出新的菜单
                        this.getMenus();
                        //设置需要展开的菜单
                        this.expandedKey = [node.parent.data.catId]
                    });s
                }).catch(() =>{
                    this.$message({
                        type: 'info',
                        message: "已取消删除"
                    });
                });
                console.log("remove", node, data);
            },
            //根据选择节点，批量删除
            batchDelete() {
                let checkNodes = this.$refs.menuTree.getCheckedNodes();
                console.log("被选中的元素", checkNodes);
                let catIds = [];
                for (let i = 0; i < checkNodes.length; i++) {
                    catIds.push(checkNodes[i].catId);
                }
                this.$confirm(`是否批量删除【${catIds}】菜单?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http({
                        url: this.$http.adornUrl("/product/category/delete"),
                        method: "post",
                        data: this.$http.adornData(catIds, false)
                    }).then(({data}) => {
                        this.$message({
                            type: "success",
                            message: "菜单批量删除成功"
                        });
                        this.getMenus();
                    }).catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消批量删除"
                        })
                    });
                });
            },
        },

        //组件创建完成时执行
        created() {
            this.getMenus()
        }
    };
</script>

<style scoped>

</style>
